<template>
  <div class="absolute h-[30vh] left-0 bottom-14 right-0 z-20 overflow-hidden">
    <Chat
      class="absolute bottom-0"
      v-if="liveDataStore.roomData.openInteraction == 1"
    />

    <Question
      class="fixed top-0 left-0 bottom-0 right-0 w-full h-screen z-20 overflow-y-auto"
      v-if="questionStore.isVisible"
      :isVisible="questionStore.isVisible"
      :questions="liveDataStore.roomData.question.questions"
      :answerTimeLimit="liveDataStore.roomData.question.answerTimeLimit"
      :answerNum="liveDataStore.roomData.question.answerNum"
      :answerCount="liveDataStore.roomWatchData?.answerCount || 0"
      @complete="questionStore.handleAnswer(liveDataStore, true)"
      @fail="questionStore.handleAnswer(liveDataStore, false)"
      @timeout="questionStore.handleTimeout(liveDataStore)"
      @close="questionStore.setIsVisible(false)"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import Chat from "./Chat.vue";
import Question from "./Question.vue";
import useLiveDataStore from "../stores/LiveDataStore";
import { useQuestionStore } from "../stores/QuestionStore";
import { usePlayerStore } from "@/store/usePlayer";
const activeTab = ref("interaction");
const liveDataStore = useLiveDataStore();
const questionStore = useQuestionStore();
const playerStore = usePlayerStore();
questionStore.initWatcher(liveDataStore, playerStore);
watch(
  () => questionStore.isVisible,
  newVal => {
    if (newVal) {
      activeTab.value = "question";
    } else {
      activeTab.value = "interaction";
    }
  }
);
</script>
<style scoped lang="less">
:deep(.van-tabs__wrap) {
  flex-shrink: 0;
}
:deep(.van-tabs__content) {
  // flex-grow: 1;
  // overflow: hidden;
  overflow-y: auto;
}
</style>
